import { useState } from 'react';

import {
   Outlet,NavLink
} from 'react-router-dom'

import Hoc_login from '../utils/Hoc_login';


import { FileOutlined, PieChartOutlined,UserOutlined,DesktopOutlined ,TeamOutlined} from '@ant-design/icons';
import { Breadcrumb, Layout, Menu } from 'antd';
const { Header, Content, Footer, Sider } = Layout;

function Home() {

  const [defaultKey,setDefaultKey] = useState('1')

  const getItem = (label, key, icon, children) => {
    return {
      key,
      icon,
      children,
      label,
    };
  }

  const [collapsed, setCollapsed] = useState(false);

  const items = [
    getItem(<NavLink to={'/home/index'}>首页</NavLink>, '1', <PieChartOutlined />),
  
   
    getItem('应用管理', 'sub1', <UserOutlined />, [
      getItem(<NavLink to={'/home/appmanagement'}>我的应用</NavLink>, '2'),
      getItem(<NavLink to={'/home/recycle'}>回收站</NavLink>, '3'),
  
    ]),
    getItem('账号中心', 'sub2', <UserOutlined />, [
      getItem(<NavLink to={'/home/authentication'}>账号信息</NavLink>, '5'),
      getItem(<NavLink to={'/home/contact'}>账号认证</NavLink>, '6'),
      getItem(<NavLink to={'/home/infomation'}>账号联系人</NavLink>, '7'),
    ]),
    getItem('工单', 'sub3', <TeamOutlined />, [
      getItem(<NavLink to={'/home/createOrder'}>创建工单</NavLink>, '8'), 
      getItem(<NavLink to={'/home/orderList'}>工单列表</NavLink>, '9')
    ]),

    getItem(<NavLink to={'/home/dataVisualization'}>数据可视化</NavLink>, '12', <FileOutlined />),
  ]


  const changeKey = (key) => {
    console.log(key);
  }

  const [openKeys, setOpenKeys] = useState(['']);
  const rootSubmenuKeys = ['sub1', 'sub2', 'sub3'];

  const onOpenChange = (keys) => {
    const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1);

    if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
      setOpenKeys(keys);
    } else {
      setOpenKeys(latestOpenKey ? [latestOpenKey] : []);
    }
  };

  return (
    <>

<Layout
      style={{
        minInlineSize : '80vw',
        minHeight: '100vh',
      }}
    >
      <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>
        <div className="logo"
         onChange={() => changeKey(items.key)} />
        <Menu theme="light" 
        defaultSelectedKeys={[defaultKey]} mode="inline"  
        openKeys={openKeys}
        onOpenChange={onOpenChange}

        items={items} />
      </Sider>
      <Layout className="site-layout">
       
        <Content
          style={{
            margin: '0 16px',
          }}
        >
        
     
          <div
            className="site-layout-background"
            style={{
              padding: 24,
              minHeight: '75vh',
            }}
          >
          
            <Outlet></Outlet>
          </div>
        </Content>
        <Footer
          style={{
            textAlign: 'center',
          }}
        >
          Ant Design ©2018 Created by Ant UED
        </Footer>
      </Layout>
    </Layout>

       
     
    </>
  )
}

export default  Hoc_login(Home)